<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="${APP_PATH}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>教学管理系统</title>
    <link rel="icon" href="public/favicon.ico" type="image/ico">
    <%@include file="/commons.jsp" %>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <%@ include file="/menu.jsp" %>
        <!--End 左侧导航-->
        <!--头部信息-->
        <%@ include file="/head.jsp" %>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form role="form" class="form-inline" id="assignForm">
                                    <input type="hidden" name="uid" id="uid" value="${uid}"/>
                                    <div class="form-group">
                                        <label for="unAssignRoleList">未分配角色列表</label><br>
                                        <select class="form-control" id="unAssignRoleList" name="rids" multiple size="10"
                                                style="width:100px;overflow-y:auto;">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <ul>
                                            <button type="button" id="btnRight">
                                                <span class="mdi mdi-chevron-double-right"></span>
                                            </button>
                                            <br>
                                            <button type="button" id="btnLeft" style="margin-top:20px;">
                                                <span class="mdi mdi-chevron-double-left"></span>
                                            </button>
                                        </ul>
                                    </div>
                                    <div class="form-group" style="margin-left:40px;">
                                        <label for="assignRoleList">已分配角色列表</label><br>
                                        <select class="form-control" id="assignRoleList" name="rids2" multiple size="10"
                                                style="width:100px;overflow-y:auto;">
                                        </select>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript">
    $(function () {
        layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
            show();
            // 增加角色
            $("#btnRight").click(function () {
                $.ajax({
                    url: "manage/userrole/assignRoleDo",
                    type: "post",
                    data: $("#assignForm").serialize(),
                    success: function (obj) {
                        if (obj.result) {
                            layer.msg("分配角色成功", {time: 1000, icon: 6, shift: 6}, function () {
                                show();
                            })
                        } else {
                            layer.msg("分配角色失败", {time: 1000, icon: 5, shift: 6}, function () {
                            })
                        }
                    }
                })
            });
            // 删除角色
            $("#btnLeft").click(function () {
                $.ajax({
                    url: "manage/userrole/unAssignRoleDo",
                    type: "post",
                    data: $("#assignForm").serialize(),
                    success: function (obj) {
                        if (obj.result) {
                            layer.msg("删除角色成功", {time: 1000, icon: 6, shift: 6}, function () {
                                show();
                            })
                        } else {
                            layer.msg("删除角色失败", {time: 1000, icon: 5, shift: 6}, function () {
                            })
                        }
                    }
                })
            });
        });//layer
    });//入口

    function show() {
        $.ajax({
            url: "manage/role/assignRoleShow",
            type: "post",
            data: $("#assignForm").serialize(),
            dataType: "json",
            success: function (obj) {
                if (obj.result) {
                    let unAssignRoleHtml = "";
                    $.each(obj.unAssignRoleList, function (index, unAssignRole) {
                        unAssignRoleHtml += "<option value=" + unAssignRole.rid + ">" + unAssignRole.rname + "</option>";
                    });
                    $("#unAssignRoleList").html(unAssignRoleHtml);
                    let assignRoleHtml = "";
                    $.each(obj.assignRoleList, function (index, assignRole) {
                        assignRoleHtml += "<option value=" + assignRole.rid + ">" + assignRole.rname + "</option>";
                    });
                    $("#assignRoleList").html(assignRoleHtml);
                } else {
                    layer.msg("查询失败", {time: 2000, icon: 5, shift: 6}, function () {
                    })
                }
            }
        })
    }
</script>
</body>
</html>
